/**
 * 初始化导航菜单并根据导航菜单初始化动态路由
 * @author cheval
 */
import {getMenuTree} from '@/api/loginApi.js'
import Empty from "@/components/layout/Empty.vue";

export default function initMenu(router, store) {
    if (store.getters.navMenus.length > 0) {
        return
    }
    getMenuTree().then(success => {
        // 格式化侧边导航菜单
        let menus = fmtNavMenu(success)
        // 添加到router
        if (!router.options.routes[1].children) {
            router.options.routes[1].children = menus
            let routes = router.options.routes
            router.addRoutes(routes)
        }
        // 存储导航菜单到store
        store.commit('permission/INIT_NAVMENUS', menus)
    });
}

/**
 * 将后端返回的树形菜单格式化
 * @param data
 * @returns {*[]}
 */
function fmtNavMenu(data) {
    let menus = []
    if (!data) {
        return menus
    }
    data.forEach(item => {
        let {menuId, name, icon, routeUrl, children, type,isLink,url} = item

        if (children && children instanceof Array) {
            children = fmtNavMenu(children)
        }

        let arr
        let menu
        let path = ''

        if (!isLink) { // 非外链
            if (routeUrl) { // 菜单
                arr = routeUrl.split('-')
                if (arr instanceof Array) {
                    if (arr.length == 1) {
                        path += arr[0] + '.vue'
                    } else {
                        for(let i = 0; i < arr.length - 1; i++) {
                            path += arr[i] + '/'
                        }
                        path += arr[arr.length - 1] + '.vue'
                    }
                }

                menu = {
                    path: routeUrl.replaceAll('-', '/'),
                    name: arr[arr.length - 1].slice(0,1).toUpperCase() + arr[arr.length - 1].slice(1),
                    children,
                    meta: {
                      menuId,
                      title: name,
                      icon,
                      type
                    },
                    type,
                    /**
                     * 注意：import() 是ES6中心的动态加载模块语法，它可以在运行时动态加载模块，并返回promise对象，其中可以传入一个
                     * 字符串路径，但是不能是变量，因为import的参数是在编译的时候就确定好的，所以不能传入变量，这里如果要使用变量，则可以使用
                     * webpack的require.ensure()方法引入组件，它可以接受变量参数，而且也是异步加载
                     *
                     */
                    component: () =>  import(`@/views${path}`),
                    // component: resolve => require([`@/views${path}`],resolve)
                }
            } else { // 目录
                menu = {
                    name: menuId, // 只做配置，无意义
                    component: Empty, // 如果不配置目录的组件，则其子路由无法显示
                    path: '/' + menuId,
                    children,
                    meta: {
                        menuId,
                        title: name,
                        icon,
                        type
                    },
                }
            }
        } else { // 外链
            menu = {
                title: name,
                path: url,
                meta: {
                    menuId,
                    title: name,
                    icon,
                    type
                }
            }
        }


        menus.push(menu)
    })
    return menus
}